import React, { useEffect, useState } from 'react'
import { Typography, Descriptions, Table } from 'antd';
import { useLocation } from 'react-router-dom';
import GoBack from "@/components/TheGoBack";
import { platformActivitySheetView, apiGetActivityConfig, apiPlatformActivityRecordtPage } from "@/api/activityManager";
import "../../style/style.scss"
const { Paragraph } = Typography;

export default function componentName() {
  const location = useLocation(); //上个页面参数
  const columns = [
    {
      title: "用户ID",
      dataIndex: "memberId",
      key: "memberId",
    },
    {
      title: "用户昵称",
      dataIndex: "nickName",
      key: "nickName",
    },
    {
      title: "手机号",
      dataIndex: "memberMobile",
      key: "memberMobile"
    },
    {
      title: "参与时间",
      dataIndex: "participationTime",
      key: "participationTime",
    },
    {
      title: "购买商品",
      dataIndex: "goodsName",
      key: "goodsName",
    },
    {
      title: "商品规格",
      dataIndex: "skuKeyValue",
      key: "skuKeyValue",
    },
    {
      title: "购买数量",
      dataIndex: "orderProductCount",
      key: "orderProductCount",
    }
  ]
  const [dataInfo, setDataInfo] = useState()
  const [dataSource, setDataSource] = useState([]); // 表格数据
  const [optionType, setOptionType] = useState([]); // 活动类型数据
  const [optionWay, setOptionWay] = useState([]); // 获取方式数据
  const [activityType, setActivityType] = useState([]); // 活动类型
  const [activityWay, setActivityWay] = useState([]); // 获取方式
  const [pageData, setPageData] = useState({ pageNo: 1, pageSize: 10, total: 0 }) //分页参数

  useEffect(() => {
    getData()
    getUserData({ pageNo: pageData.pageNo, pageSize: pageData.pageSize })
  }, [])
  //数据详情
  const getData = async () => {
    let activityId = location.state.activityId
    await platformActivitySheetView({ activityId }).then(res => {
      if (res.code === 0) {
        let activityStatus = ''
        switch (res.data.activityStatus) {
          case 0:
            activityStatus = '正常'
            break;
          case 1:
            activityStatus = '关闭'
            break;
          default:
        }
        res.data.activityStatus = activityStatus
        setDataInfo(res.data)
        getConfigTypes('ACTIVITY_TYPE', res.data.activityType)
        getConfigTypes('ACTIVITY_WAY', res.data.activityWay)
      } else {
      }
    })
  }
  // 活动类型、获取方式 数据处理
  const getConfigTypes = async (platformSetKey, value) => {
    await apiGetActivityConfig({ platformSetKey }).then(res => {
      if (res.code === 0) {
        if (platformSetKey && platformSetKey === 'ACTIVITY_TYPE') {
          let data = []
          data = res.data.map(item => {
            return {
              ...item,
              label: item.platformSetShowValue,
              value: item.platformSetUseValue
            }
          })
          setOptionType(data)
          const obj = data.find(item => item.value === value)
          setActivityType(obj ? obj.label : '')
        } else {
          let data = []
          data = res.data.map(item => {
            return {
              ...item,
              label: item.platformSetShowValue,
              value: item.platformSetUseValue
            }
          })
          setOptionWay(data)
          const obj = data.find(item => item.value === value)
          setOptionWay(obj ? obj.label : '')
        }
      }
    })

  }
  // 参与用户列表
  const getUserData = async (value) => {
    let activityId = location.state.activityId
    if (value) {
      await apiPlatformActivityRecordtPage({ ...value, activityId }).then(res => {
        if (res.code === 0 && res.data) {
          let data = []
          data = res.data.map(item => {
            return {
              activityRecordId: item.activityRecordId,
              couponTitle: item.couponTitle,
              goodsName: item.goodsName,
              memberId: item.memberId,
              memberMobile: item.memberMobile,
              nickName: item.nickName,
              orderProductCount: item.orderProductCount,
              participationTime: item.participationTime,
              skuKeyValue: item.skuKeyValue ? JSON.parse(item.skuKeyValue).skuAttribute.map(sku => {
                return `${sku.key}:${sku.value}`
              }).join(';') : ''
            }
          })
          setDataSource(data)
        }
      })
    }
  }
  // 分页切换
  const pageChange = async (pageNo, pageSize) => {
    await getData({
      pageNo,
      pageSize,
    })
  }
  return (
    <div className='wrap-box'>
      <GoBack title={"参与用户"} />
      <div className='wrap-box-content'>
        <Paragraph strong>
          <blockquote>活动信息</blockquote>
        </Paragraph>
        {
          dataInfo && <Descriptions layout="vertical" bordered column={4} >
            <Descriptions.Item label="活动名称">{dataInfo.activityName}</Descriptions.Item>
            <Descriptions.Item label="活动类型">{activityType}</Descriptions.Item>
            <Descriptions.Item label="获取方式">{activityWay}</Descriptions.Item>
            <Descriptions.Item label="活动状态">{dataInfo.activityStatus}</Descriptions.Item>
          </Descriptions>}

        <Paragraph strong>
          <blockquote>参与用户</blockquote>
        </Paragraph>
        <Table
          scroll={{ x: 960 }}
          bordered
          columns={columns}
          dataSource={dataSource}
          rowKey={'memberId'}
          pagination={{ position: ['bottomCenter'], current: pageData.pageNo, pageSize: pageData.pageSize, total: pageData.total, showSizeChanger: false, onChange: pageChange }}
        />
      </div>
    </div>
  )
}
